<template>
  <div class="measureClass">
  </div>
</template>

<script>
import CtMapUtils from '../../api/ctMap'

export default {
  name: "ctMeasure",
  components: {},
  data: () => ({
    toolbar: null,
    areaTool: null,
    distance: null,

  }),
  mounted() {
    this.$nextTick(() => {
      const {map} = this.$parent;
      this.init(map)
    });
  },
  methods: {
    init(map) {
      let measureUtil = CtMapUtils.measureUtil;
      this.distance = measureUtil.ctCreateDistanceTool(map);
      this.areaTool = measureUtil.ctCreateAreaTool('Polygon')
      measureUtil.ctAddToMap(this.distance, map)
      measureUtil.ctAddToMap(this.areaTool, map)
      // 创建工具栏
      let controllerUtil = CtMapUtils.controllerUtil;
      let toolbar = controllerUtil.ctCreateToolbar(this.createItem());
      controllerUtil.ctAddToMap(toolbar, map)
      //绘画后的监听 回调
      measureUtil.ctAddListen(this.distance, 'drawend', function (data) {

      })
      //绘画后的监听 回调
      measureUtil.ctAddListen(this.areaTool, 'drawend', function (data) {

      })
    },
    createItem() {
      const vue = this
      return {
        items: [
          {
            //<div style="line-height: 20px;min-width: 95px">工具箱</div>
            item: '工具箱',
            children: [
              {
                item: '测距',
                click: function () {
                  vue.distance.enable();

                }
              }, {
                item: '测面',
                click: function () {
                  vue.areaTool.enable();

                }
              }
            ],
          },
          {
            item: '视野',
            children: [
              {
                item: '测距',
                click: function () {
                  vue.distance.enable();
                }
              }, {
                item: '测面',
                click: function () {
                  vue.areaTool.enable();
                }
              }
            ]
          },
          {
            item: '搜索',
            children: [
              {
                item: '测距',
                click: function () {
                  vue.distance.enable();
                }
              }, {
                item: '测面',
                click: function () {
                  vue.areaTool.enable();
                }
              }
            ],
            click: function () {

            }
          }
        ]
      }
    }
  }
}
</script>

<style scoped>

</style>
